<template>
  <div class="body">
    <div class="header"></div>
    <img
      class="imgefix"
      @click="showPopup"
      src="../../assets/img/you/dex.png"
      alt=""
    />
    <!-- 规则弹窗 -->
    <van-popup
      v-model="Fixed"
      class="boxed"
    >
      <img
        @click="on"
        src="../../assets/img/you/stop.png"
        class="stop"
        alt=""
      />
      <div class="backgrend">
        <!-- <div class="gui">抽奖规则</div> -->
        <ul>
          <li>一、活动规则：</li>
          <li>1、活动时间：自2021年9月7日-2021年9月21日止。</li>
          <li>
            2、活动期间，用户登录媛福达APP手机客户端后，同一个登录账号仅限于在一个固定设备上登录参与本活动。如同一登录账号中途更换登录设备，将无法参与本活动。
          </li>
          <li>
            3、活动期间，同一个登录账号每天仅可参与一次抽奖活动。本次活动奖品（优惠券、购物卡、实物兑换券）及发放条件由媛福达公司根据活动需求设定。
          </li>
          <li>
            4、账号登录后点击活动页中的“开始抽奖”按钮，大转盘开始转动，直至大转盘停止转动后，指针所指向的奖品，即为用户抽中的奖品。
          </li>
          <li>
            5、活动抽中的奖品（优惠券、购物卡、实物兑换券）可在“媛福达APP→我的→我的卡券”中查看。
          </li>
          <li>
            6、活动抽中的奖品（优惠券、购物卡、实物兑换券）仅可在媛福达APP购物使用，不可抵现，不可转让。
          </li>
          <li>
            7、如用户使用三大运营商以外的其他运营商和虚拟运营商所运营的手机号码（包括但不限于165、170、711、147等号段开头的手机号码）注册媛福达线上商城用户，均无权参与本次活动。
          </li>
          <li>
            8、媛福达公司有权在法律法规准许的范围内对本次活动规则作出解释并做适当调整。
          </li>

          <li>9、媛福达公司有权在法律法规范围内对本次活动规则做出解释。</li>
          <li>二、活动注意事项：</li>
          <li>
            1、参与活动前，请用户详细阅读活动规则及相关条款。凡参与本次活动，则视为用户已知晓并同意遵守活动规则及免责声明条款。
          </li>
          <li>
            2、本平台严厉禁止和打击恶意刷奖行为。参与抽奖的过程中，如用户通过任何不正当手段（包括但不限于利用黑客工具、软件作弊等方式恶意操作）参加活动获取权益或者不符合活动规则的行为，媛福达公司有权在不事先通知的前提下取消该违规用户参与活动的资格和已获得的相应权益。
          </li>
          <li>
            3、参加抽奖活动需要遵守相关法律法规，如涉及违反相关规定，一经发现将根据违反程度对违规用户采取相应的处理措施，情节严重者，媛福达公司将依法追究其法律责任。
          </li>
          <li>
            4、本平台不对因网络传输原因而导致参加者提交的信息错误承担任何责任。
          </li>
          <li>三、活动免责事项及申明：</li>
          <li>
            1、因用户自身主观过错或恶意行为，如不按规定的正常流程参与活动、填写信息不真实、不完整等类似情形致使此次抽奖无效、无法核验用户真实信息而不能领取奖励的，媛福达公司不承担责任。
          </li>
          <li>
            2、参与抽奖的过程中，如用户出现违规行为（包括但不限于利用黑客工具、软件作弊等方式恶意操作），媛福达公司有权在不事先通知的前提下取消该违规用户参与活动的资格和已获得的相应权益。
          </li>
          <li>
            3、任何由于网络问题、黑客攻击、计算机病毒侵入或发作、因政府管制而造成的暂时性关闭等影响网络正常运行的不可抗力而造成的抽奖活动无法正常进行或非正常获奖无效，媛福达公司均得免责。
          </li>
          <li>
            4、抽奖期间发生任何不可抗力事件使本次抽奖活动或本次抽奖目的的不能实现，媛福达公司免责。不可抗力是指不可控制、不可预见或不能避免，即使预见亦无法避免的时间，该事件使任何一方根据本协议履行其全部或部分义务已不可能。包括社会异常时间，自然灾害或政府管制行为而造成的网络关闭等非平台过错的行为。
          </li>
        </ul>
      </div>
      <img
        @click="on"
        class="images"
        src="../../assets/img/you/mi.png"
        alt=""
      />
    </van-popup>
    <div id="bg">
      <img
        @click="go"
        id="wekupButton"
        class="pointer"
        src="../../assets/img/you/choujianganniu@2x.png"
        alt="pointer"
      />
      <img
        ref="turntable"
        class="turntable"
        src="../../assets/img/you/zhuan.png"
        alt="turntable"
      />
      <div class="text">您还有{{ goTimes }}次抽奖机会</div>
    </div>
    <!-- 中奖信息 -->

    <!-- <div>{{1630064711000 | formatDate}}</div> -->
    <van-tabs
      type="card"
      animated
      color="#ffedc0"
      background="#843fd6"
      title-active-color="#A76E04"
      title-inactive-color="#DBA7FC"
    >
      <van-tab title="中奖记录">
        <!-- <div class="Box">
          <ul>
            <li v-for="item in Windraw" :key="item.id">
              <div class="Text-hot">
                恭喜{{ item.phone }}获得
                <span>{{ item.prizeName }}</span>
              </div>
              <div class="time">{{ (item.winTime * 1000) | dateFormat }}</div>
            </li>
          </ul>
        </div> -->
        <vue-seamless-scroll
          :data="Windraw"
          class="Box"
        >
          <ul>
            <li
              v-for="item in Windraw"
              :key="item.id"
            >
              <div class="Text-hot">
                恭喜{{item.phone}}获得
                <span>{{item.prizeName}}</span>
              </div>
              <div class="time">{{item.winTime*1000 | dateFormat}}</div>
            </li>
          </ul>
        </vue-seamless-scroll>
      </van-tab>
      <!-- <van-tab title="抽奖记录">
        <div class="Boxe">
          <ul>
            <li
              v-for="item in Luckdraw"
              :key="item.id"
            >
              <div class="requed">{{item.prizeName}}
              </div>
              <div class="time">{{item.winTime*1000 | dateFormat}}</div>
              <div class="Ling">
                {{item.prizeId == 0 ? '' : '已领取'}}
              </div>
            </li>
          </ul>
        </div>
      </van-tab> -->
    </van-tabs>
    <!-- 中奖弹窗 -->
    <van-popup
      v-model="win"
      class="Box-win"
    >
      <img
        @click="on"
        src="../../assets/img/you/stop.png"
        class="stop"
        alt=""
      />
      <div class="backgrend">
        <!-- 动态参数 -->
        <!-- 测试阶段 -->
        <div class="gui">
          {{ id == 0 ? "很遗憾" : "恭喜您" }}
        </div>
        <p class="text-Hot">
          {{ id == 0 ? "好可惜！差一点就中奖了" : "获得" + prizes.name }}
        </p>
        <img
          class="Timg"
          :src="id == 0 ? node : prizes.img"
          alt=""
        />
        <div class="btn-Hot">
          {{ id == 0 ? " 大奖还有明天再来" : "奖品已放置“我的-我的卡券”" }}
        </div>
        <div
          class="Go-Hot"
          v-show="Gohot"
          @click="balance"
        >点击查看</div>
      </div>
      <img
        @click="Gowin"
        class="images"
        src="../../assets/img/you/goback.png"
        alt=""
      />
    </van-popup>
  </div>
</template>

<script>
import bridge from '../../js/js1'
import { Frequency, doDraw, Win, Luckdraw } from '@/api/index'
import { share } from '../../js/public'
import { getSystem, openApp, getUrlQuery, parseKeyValue } from '../../js/js'
// import Vconsole from 'vconsole'
// const vConsole = new Vconsole()
import vueSeamlessScroll from 'vue-seamless-scroll' // 无缝滚动
export default {
  // 组件名称
  name: 'Youe',
  // 局部注册的组件
  components: {
    vueSeamlessScroll
  },
  // 组件参数 接收来自父组件的数据
  props: {},
  // 组件状态值
  data () {
    return {
      system: getSystem(),
      share: true,
      isGo: false,              //是否正在执行动画
      oTurntable: '',            //执行动画的对象
      randomDeg: 0,             //即将旋转的度数   
      lastDeg: 0,                //上一次旋转的度数
      goTimes: 0,					//抽奖次数
      id: '',// 奖品id
      prizes: '',
      node: require('../../assets/img/you/wei.png'), // 未中奖图片
      win: false,// 中奖弹窗
      Fixed: false,// 弹窗规则
      Gohot: true,// 未中奖不显示 ‘点击查看’
      Luckdraw: [],     //抽奖记录
      Windraw: [],     //中奖记录
    }
  },
  filters: {
    formatDate: function (value) {
      let date = new Date(value);
      let y = date.getFullYear();
      let MM = date.getMonth() + 1;
      MM = MM < 10 ? ('0' + MM) : MM;
      let d = date.getDate();
      d = d < 10 ? ('0' + d) : d;
      let h = date.getHours();
      h = h < 10 ? ('0' + h) : h;
      let m = date.getMinutes();
      m = m < 10 ? ('0' + m) : m;
      let s = date.getSeconds();
      s = s < 10 ? ('0' + s) : s;
      return MM + '-' + d + ' ' + h + ':' + m + ':' + s;
    }
  },
  // 计算属性
  computed: {},
  // 侦听器
  watch: {},
  // 生命周期钩子   注：没用到的钩子请自行删除
  /**
  * 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在
  */
  created () {
    this.GetWin()
    this.GetLuck()
    this.system = getSystem()
    // 调用获取次数接口 获取剩余 分享次数 和 游戏次数
  },
  /**
  * el 被新创建的 vm.el 替换，并挂载到实例上去之后调用该钩子。
  * 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.el 也在文档内。
  */
  mounted () {
    this.Token()
    this.oTurntable = this.$refs.turntable
    share({
      title: '大转盘!',
      desc: '严选品质，美味无法挡;品牌美食，低至6.5折。',
      imgUrl: 'https://download.yuanfuda933.com/h5/images/youe.png',
      shareUrl: 'https://download.yuanfuda933.com/h5/other2.html#/youe',
      share: this.share,
    })
  },
  // 组件方法
  methods: {
    // 时间过滤器
    dateFormat (fmt, date) {
      let ret;
      const opt = {
        "Y+": date.getFullYear().toString(), // 年
        "m+": (date.getMonth() + 1).toString(), // 月
        "d+": date.getDate().toString(), // 日
        "H+": date.getHours().toString(), // 时
        "M+": date.getMinutes().toString(), // 分
        "S+": date.getSeconds().toString(), // 秒
        // 有其他格式化字符需求可以继续添加，必须转化成字符串
      };
      for (let k in opt) {
        ret = new RegExp("(" + k + ")").exec(fmt);
        if (ret) {
          fmt = fmt.replace(
            ret[1],
            ret[1].length == 1 ? opt[k] : opt[k].padStart(ret[1].length, "0")
          );
        }
      }
      return fmt;
    },
    Token () {
      this.getToken(token => {
        this.$store.commit('getUser', token)
      })
      let that = this
      setTimeout(function () {
        that.Getnumber()
      }, 500)
    },
    // 获取抽奖次数
    Getnumber () {
      const tokened = this.$store.state.gettoken.token
      // console.log(tokened);
      if (tokened) {
        Frequency().then(res => {
          // console.log(res);
          if (res.data.code == 200) {
            this.goTimes = res.data.data
          }

        }).catch(err => {
          console.log('接口出错');
          console.log(err);
        })
      } else {
        this.$toast('请先登录！');
        return false
      }
    },
    // 获取中奖记录
    GetWin () {
      const tokened = this.$store.state.gettoken.token
      // console.log(tokened);
      // if (tokened) {
      Win().then(res => {
        console.log(res);
        if (res.data.code == 200) {
          this.Windraw = res.data.data
        }
      }).catch(err => {
        console.log('接口出错');
        console.log(err);
      })
      // } else {
      //   this.$toast('请先登录！');
      //   return false
      // }
    },
    // 获取抽奖记录
    GetLuck () {
      const tokened = this.$store.state.gettoken.token
      // console.log(tokened);
      // if (tokened) {
      Luckdraw().then(res => {
        console.log(res);
        if (res.data.code == 200) {
          this.Luckdraw = res.data.data
        }
      }).catch(err => {
        console.log('接口出错');
        console.log(err);
      })
      // } else {
      //   this.$toast('请先登录！');
      //   return false
      // }
    },
    getToken (callback) {
      // console.log(callback);
      const system = getSystem()
      if (system.android) {
        bridge.dsCall('getToken', '', res => {
          if (typeof res === 'string') res = JSON.parse(res)
          callback(res)
        })
        return
      }
      if (system.iOS) {
        bridge.iosReg('myTokenmethd', res => {
          const token = parseKeyValue(res)
          // const token = qs.parse(res)
          callback(token)
        })
        bridge.iosCall('getToken', '', res => { })
      }
    },
    // 点击去查看余额
    balance () {
      window.location.href = 'yfd://yfdmall:8080/couponList'
    },
    // 弹出规则弹窗
    showPopup () {
      this.Fixed = true;
    },
    // 关闭规则弹窗
    on () {
      if (this.Fixed == true || this.win == true)
        this.Fixed = false;
      this.win = false;
    },
    // 跳转主会场
    Gowin () {
      window.location.href = 'https://download.yuanfuda933.com/h5/other2.html#/anniversarye'
      this.win = false;
    },
    go () {
      // 测试跳转
      // 判断是否登录，未的登录跳登录
      // this.$toast('活动未开始，敬请期待')
      const system = getSystem()
      const tokened = this.$store.state.gettoken.token
      console.log(tokened);
      if (system.yfd) {
        if (tokened) {
          if (!this.isGo && this.goTimes > 0) {
            // 获取中奖id参数
            this.getNumber()
          }
          else if (!this.isGo && this.goTimes <= 0) {
            this.$dialog.alert({
              message: '您的抽奖次数已用完 请明天再来',
              theme: 'round-button',
            }).then(() => {
              // on close
            });

          }
          else return this.$toast('正在抽奖！');    			//表明正在抽奖，未结束扔点击无效
        }
        else {
          this.$toast("请先登录！");
          if (system.android) {
            console.log('and 登录')
            bridge.dsCall('h5Login', '', e => {
              callback(e)
            })
          }
          if (system.iOS) {
            console.log('ios 登录')
            bridge.iosCall('h5Login', '', e => {
              callback(e)
            })
          }
        }
      } else {
        this.$toast("请先登录APP！");
      }
    },
    href (uri, blank = true) {
      const a = document.createElement('a')
      a.style.display = 'none'
      a.href = uri
      if (blank) a.setAttribute('target', '_blank')
      document.body.appendChild(a)
      a.click()
      setTimeout(t => {
        document.body.removeChild(a)
      }, 0)
    },
    getRandom (n, m) {             //该方法能产生[n,m]之间随机数
      let result = Math.floor(Math.floor(Math.random() * (m - n + 1) + n))
      return result;
    },
    getNumber () {
      /*  
        调整中奖概率(让每次旋转前指针都在初始位置，这样才准确)
        想转到第一项，需要转：360/7*0 + 360/7/2;   --->该项为超级大奖奖项
        想转到第二项，需要转：360/7*1 + 360/7/2;
        想转到第三项，需要转：360/7*2 + 360/7/2;
        想转到第四项，需要转：360/7*3 + 360/7/2;
        想转到第五项，需要转：360/7*4 + 360/7/2;
        想转到第六项，需要转：360/7*5 + 360/7/2;
        想转到第七项，需要转：360/7*6 + 360/7/2;   --->该项为未中奖项
      */
      // let number = this.getRandom(0, 100)
      // 后端返回0-6之间随机数  let caseNum = res
      const tokened = this.$store.state.gettoken.token
      // console.log(tokened);
      if (tokened) {
        doDraw().then(res => {
          console.log(res);
          if (res.data.code == 200) {
            if (res.data.data.prize == null) {
              this.id = '0'
              var number = this.id
              let caseNum = ''
              if (number == 0) {
                caseNum = 0             //粗略概率为1%
              } else if (number == 1) {
                caseNum = 1             //粗略概率为5%
              } else if (number == 2) {
                caseNum = 2             //粗略概率为5%
              } else if (number == 3) {
                caseNum = 3             //粗略概率为5%
              } else if (number == 4) {
                caseNum = 4             //粗略概率为5%
              } else if (number == 5) {
                caseNum = 5             //粗略概率为5%
              } else {
                caseNum = 6             //粗略概率为75%
              }
              switch (caseNum) {
                case 6:
                  this.ratating(360 / 7 * 0 + 360 / 7 / 2, "小米11pro手机", caseNum);
                  break;
                case 5:
                  this.ratating(360 / 7 * 1 + 360 / 7 / 2, "500元购物卡", caseNum);
                  break;
                case 4:
                  this.ratating(360 / 7 * 2 + 360 / 7 / 2, "1元优惠卷", caseNum);
                  break;
                case 3:
                  this.ratating(360 / 7 * 3 + 360 / 7 / 2, "5元优惠卷", caseNum);
                  break;
                case 2:
                  this.ratating(360 / 7 * 4 + 360 / 7 / 2, "艾谷稻米油5L", caseNum);
                  break;
                case 1:
                  this.ratating(360 / 7 * 5 + 360 / 7 / 2, "摩飞料理机", caseNum);
                  break;
                default:
                  this.ratating(360 / 7 * 6 + 360 / 7 / 2, "谢谢参与", caseNum);
                  break;
              }

              return
            } else {
              // 传递id
              this.id = res.data.data.prize.sort
              var number = this.id
              let caseNum = ''
              if (number == 0) {
                caseNum = 0             //粗略概率为1%
              } else if (number == 1) {
                caseNum = 1             //粗略概率为5%
              } else if (number == 2) {
                caseNum = 2             //粗略概率为5%
              } else if (number == 3) {
                caseNum = 3             //粗略概率为5%
              } else if (number == 4) {
                caseNum = 4             //粗略概率为5%
              } else if (number == 5) {
                caseNum = 5             //粗略概率为5%
              } else {
                caseNum = 6             //粗略概率为75%
              }
              switch (caseNum) {
                case 6:
                  this.ratating(360 / 7 * 0 + 360 / 7 / 2, "小米11pro手机", caseNum);
                  break;
                case 5:
                  this.ratating(360 / 7 * 1 + 360 / 7 / 2, "500元购物卡", caseNum);
                  break;
                case 4:
                  this.ratating(360 / 7 * 2 + 360 / 7 / 2, "1元优惠卷", caseNum);
                  break;
                case 3:
                  this.ratating(360 / 7 * 3 + 360 / 7 / 2, "5元优惠卷", caseNum);
                  break;
                case 2:
                  this.ratating(360 / 7 * 4 + 360 / 7 / 2, "艾谷稻米油5L", caseNum);
                  break;
                case 1:
                  this.ratating(360 / 7 * 5 + 360 / 7 / 2, "摩飞料理机", caseNum);
                  break;
                default:
                  this.ratating(360 / 7 * 6 + 360 / 7 / 2, "谢谢参与", caseNum);
                  break;
              }
              // this.$toast(this.id)
              // 传递中奖参数
              this.prizes = res.data.data.prize
            }
          } else if (res.data.data == null) {
            if (this.goTimes <= 0) {
              this.$toast('您的抽奖次数已用完 请明天再来')
              return
            } else {
              this.id = '0'
              var number = this.id
              let caseNum = ''
              if (number == 0) {
                caseNum = 0             //粗略概率为1%
              } else if (number == 1) {
                caseNum = 1             //粗略概率为5%
              } else if (number == 2) {
                caseNum = 2             //粗略概率为5%
              } else if (number == 3) {
                caseNum = 3             //粗略概率为5%
              } else if (number == 4) {
                caseNum = 4             //粗略概率为5%
              } else if (number == 5) {
                caseNum = 5             //粗略概率为5%
              } else {
                caseNum = 6             //粗略概率为75%
              }
              switch (caseNum) {
                case 6:
                  this.ratating(360 / 7 * 0 + 360 / 7 / 2, "小米11pro手机", caseNum);
                  break;
                case 5:
                  this.ratating(360 / 7 * 1 + 360 / 7 / 2, "500元购物卡", caseNum);
                  break;
                case 4:
                  this.ratating(360 / 7 * 2 + 360 / 7 / 2, "1元优惠卷", caseNum);
                  break;
                case 3:
                  this.ratating(360 / 7 * 3 + 360 / 7 / 2, "5元优惠卷", caseNum);
                  break;
                case 2:
                  this.ratating(360 / 7 * 4 + 360 / 7 / 2, "艾谷稻米油5L", caseNum);
                  break;
                case 1:
                  this.ratating(360 / 7 * 5 + 360 / 7 / 2, "摩飞料理机", caseNum);
                  break;
                default:
                  this.ratating(360 / 7 * 6 + 360 / 7 / 2, "谢谢参与", caseNum);
                  break;
              }
              return
            }

          }
        }).catch(err => {
          console.log('接口出错');
          console.log(err);
        })
      } else {
        this.$toast('请先登录！');
        return false
      }
      // var number = this.id
      // let caseNum = ''
      // if (number == 0) {
      //   caseNum = 0             //粗略概率为1%
      // } else if (number == 1) {
      //   caseNum = 1             //粗略概率为5%
      // } else if (number == 2) {
      //   caseNum = 2             //粗略概率为5%
      // } else if (number == 3) {
      //   caseNum = 3             //粗略概率为5%
      // } else if (number == 4) {
      //   caseNum = 4             //粗略概率为5%
      // } else if (number == 5) {
      //   caseNum = 5             //粗略概率为5%
      // } else {
      //   caseNum = 6             //粗略概率为75%
      // }
      // switch (caseNum) {
      //   case 6:
      //     this.ratating(360 / 7 * 0 + 360 / 7 / 2, "小米11pro手机", caseNum);
      //     break;
      //   case 5:
      //     this.ratating(360 / 7 * 1 + 360 / 7 / 2, "500元购物卡", caseNum);
      //     break;
      //   case 4:
      //     this.ratating(360 / 7 * 2 + 360 / 7 / 2, "1元优惠卷", caseNum);
      //     break;
      //   case 3:
      //     this.ratating(360 / 7 * 3 + 360 / 7 / 2, "5元优惠卷", caseNum);
      //     break;
      //   case 2:
      //     this.ratating(360 / 7 * 4 + 360 / 7 / 2, "香大米5Kg", caseNum);
      //     break;
      //   case 1:
      //     this.ratating(360 / 7 * 5 + 360 / 7 / 2, "美菱空气炸锅", caseNum);
      //     break;
      //   default:
      //     this.ratating(360 / 7 * 6 + 360 / 7 / 2, "谢谢参与", caseNum);
      //     break;
      // }
    },
    ratating (deg, text, id) {
      this.goTimes--
      this.isGo = true
      let times = this.getRandom(3, 6)//圈数(从用户体验角度考虑，设计随机转3-6圈。最少3圈，最多6圈)

      this.randomDeg = deg + 360 * times      //记录这次要旋转的度数(传来的度数+圈数)
      let realDeg = (360 - this.lastDeg % 360) + this.lastDeg + this.randomDeg
      /*上次指针离初始状态的度数 + 上次的度数 + 这次要旋转的度数
      (这样的目的是为了每次旋转都从原点开始，保证数据准确)*/
      this.oTurntable.style.transform = `rotate(${realDeg}deg)`;// 旋转
      setTimeout(() => {
        // 在此调用获取接口
        this.win = true // 弹出中奖信息框
        this.isGo = false // 结束中奖状态动画
        console.log(id);
        // 为6不显示 点击查看
        if (id == 0) {
          this.Gohot = false
        } else {
          this.Gohot = true
        }
        // this.$toast(`您的中奖结果为${text}`);
        console.log(`以原点为基准共旋转了${this.randomDeg}度,
        			以一圈为基准相对旋转了${this.randomDeg % 360}度,最终结果为${text}`)
        this.lastDeg = realDeg    //把这次度数存储起来，方便下一次获取
      }, 4000)                     //4000ms为css里面写的执行动画的时间
    },
  }
}
</script>

<style scoped lang="less">
.body {
  overflow: hidden;
  min-width: 320px;
  max-width: 750px;
  width: 10rem;
  // height: 57.28rem;
  background: #6704a6;
  margin: 0 auto;
  line-height: 1.5;
  font-family: Arial, Helvetica;
  .header {
    width: 10rem;
    height: 19.6rem;
    background: url("../../assets/img/you/header.png") no-repeat;
    background-size: contain;
  }
  // 固定规则
  .imgefix {
    position: fixed;
    width: 1.466667rem;
    height: 0.986667rem;
    right: 0%;
    top: 2.26rem;
  }
  // 弹出层
  .boxed {
    width: 8.046667rem;
    height: 13.093333rem;
    // background: transparent;
    box-sizing: border-box;
    background: url("../../assets/img/you/guiz.png") no-repeat;
    background-size: contain;
    border-radius: 0.266667rem;
    overflow: hidden;
    padding-top: 3rem;
    padding-left: 0.26rem;
    padding-right: 0.26rem;
    .stop {
      width: 1.066667rem;
      height: 1.066667rem;
      position: absolute;
      top: 18%;
      right: 0%;
    }
    .backgrend {
      margin: 0 auto;
      box-sizing: border-box;
      border-radius: 0.266667rem;
      text-indent: 1em;
      width: 7.046667rem;
      height: 8.093333rem;
      font-size: 0.48rem;
      color: #362c2c;
      overflow: auto;
      .gui {
        position: fixed;
        top: 19%;
        left: 2%;
        width: 2.666667rem;
        font-size: 0.533333rem;
        color: #ffffff;
        font-weight: 600;
        margin: 0.2rem 2.333333rem 0.2rem;
      }
    }
    .images {
      display: block;
      position: absolute;
      bottom: 0%;
      left: 23%;
      width: 4.213333rem;
      height: 1.04rem;
    }
  }
  // 中奖弹窗
  .Box-win {
    width: 8.046667rem;
    height: 13.093333rem;
    // background: transparent;
    box-sizing: border-box;
    background: url("../../assets/img/you/pic.png") no-repeat;
    background-size: contain;
    border-radius: 0.266667rem;
    overflow: hidden;
    padding-top: 3rem;
    padding-left: 0.26rem;
    padding-right: 0.26rem;
    .stop {
      width: 1.066667rem;
      height: 1.066667rem;
      position: absolute;
      top: 18%;
      right: 0%;
    }
    .backgrend {
      margin: 0 auto;
      box-sizing: border-box;
      width: 7.046667rem;
      height: 8.093333rem;
      overflow: auto;
      .gui {
        position: fixed;
        top: 10%;
        left: 4%;
        text-align: center;
        width: 2.666667rem;
        font-size: 0.533333rem;
        color: #ffffff;
        font-weight: 600;
        margin: 0.2rem 2.333333rem 0.2rem;
      }
      .text-Hot {
        font-weight: 600;
        width: 7.046667rem;
        height: 0.566667rem;
        text-align: center;
        line-height: 0.566667rem;
        font-size: 0.426667rem;
        color: #de5f3b;
      }
      .Timg {
        margin-top: 0.4rem;
        margin-left: 1.6rem;
        width: 4rem;
        height: 4rem;
      }
      .btn-Hot {
        width: 6.106667rem;
        margin: 0.133333rem auto 0;
        font-size: 0.373333rem;
        color: #595959;
        text-align: center;
      }
      .Go-Hot {
        text-decoration: underline;
        width: 6.106667rem;
        margin: 0.133333rem auto 0;
        font-size: 0.373333rem;
        color: #e76732;
        text-align: center;
      }
    }
    .images {
      display: block;
      position: absolute;
      bottom: 0%;
      left: 7%;
      width: 6.933333rem;
      height: 1.84rem;
    }
  }
  // tab栏
  .van-tabs--card /deep/ .van-tabs__wrap {
    height: 1.066667rem;
    .van-tabs__nav--card {
      border: 0;
      height: 1.066667rem;
      border-radius: 0.266667rem;
      .van-tab.van-tab--active {
        border-radius: 0.266667rem;
        .van-tab__text--ellipsis {
          font-weight: 600;
        }
      }
    }
  }
  @-webkit-keyframes scrollText1 {
    0% {
      -webkit-transform: translateY(0px);
    }
    20% {
      -webkit-transform: translateY(-40px);
    }
    40% {
      -webkit-transform: translateY(-70px);
    }
    60% {
      -webkit-transform: translateY(-100px);
    }
    80% {
      -webkit-transform: translateY(-130px);
    }
    100% {
      -webkit-transform: translateY(-160px);
    }
  }

  @keyframes scrollText1 {
    0% {
      -webkit-transform: translateY(0px);
    }
    20% {
      -webkit-transform: translateY(-40px);
    }
    40% {
      -webkit-transform: translateY(-70px);
    }
    60% {
      -webkit-transform: translateY(-100px);
    }
    80% {
      -webkit-transform: translateY(-130px);
    }
    100% {
      -webkit-transform: translateY(-160px);
    }
  }
  // tab栏内容
  .van-tab__pane-wrapper {
    height: 9.4rem;
    .Box {
      width: 9.466667rem;
      height: 8.8rem;
      border-radius: 0.166667rem;
      margin: 0.266667rem auto;
      background: #ffffff;
      overflow: hidden;
      // display: flex;
      // overflow-y: scroll;
      // overflow-x: hidden;
      ul {
        li {
          float: left;
          position: relative;
          margin-left: 0.16rem;
          width: 9.066667rem;
          height: 1.73rem;
          border-bottom: 0.026667rem solid #f5f5f5;
          .Text-hot {
            width: 6.2rem;
            margin-top: 0.693333rem;
            margin-left: 0.373333rem;
            font-size: 0.373333rem;
            color: #000000;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            span {
              color: #b33e32;
            }
          }
          .time {
            position: absolute;
            right: 2%;
            top: 41%;
            font-size: 0.32rem;
            color: #ababab;
          }
        }
      }
    }
    .Boxe {
      width: 9.466667rem;
      height: 8.8rem;
      border-radius: 0.166667rem;
      margin: 0.266667rem auto;
      background: #ffffff;
      overflow: hidden;
      // display: flex;
      // overflow-y: scroll;
      // overflow-x: hidden;
      ul {
        top: 0px;
        -webkit-animation: scrollText1 8s infinite cubic-bezier(1, 0, 0.5, 0);
        animation: scrollText1 8s infinite cubic-bezier(1, 0, 0.5, 0);
        li:hover {
          animation-play-state: paused;
          -webkit-animation-play-state: paused;
        }
        li {
          float: left;
          position: relative;
          margin-left: 0.16rem;
          width: 9.066667rem;
          height: 1.73rem;
          border-bottom: 0.026667rem solid #f5f5f5;
          .requed {
            width: 2.666667rem;
            font-size: 0.373333rem;
            color: #000000;
            margin-left: 0.4rem;
            margin-top: 0.4rem;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }
          .time {
            font-size: 0.32rem;
            color: #ababab;
            margin-left: 0.4rem;
          }
          .Ling {
            position: absolute;
            right: 6%;
            top: 37%;
            font-size: 0.32rem;
            color: #b33e32;
          }
        }
      }
    }
  }
  // 转盘
  #bg {
    width: 8.666667rem;
    height: 12.053333rem;
    margin: -10rem auto 0;
    background: url("../../assets/img/you/yuanpan@2x.png") no-repeat;
    background-size: contain;
    position: relative;
  }
  .pointer {
    width: 2.626667rem;
    height: 2.64rem;
    position: absolute;
    z-index: 10;
    top: 26%;
    left: 35%;
  }
  .turntable {
    width: 6.4rem;
    height: 6.4rem;
    position: absolute;
    z-index: 5;
    top: 10%;
    left: 13%;
    transition: all 4s; /*动画执行时间为4s */
  }
  .text {
    position: absolute;
    left: 16%;
    bottom: 9%;
    width: 6.013333rem;
    height: 1.173333rem;
    font-size: 0.48rem;
    text-align: center;
    line-height: 1.173333rem;
    color: #ffffff;
    border: 0.053333rem solid #29e6ff;
    border-radius: 0.666667rem;
    box-sizing: border-box;
    background: -webkit-linear-gradient(left, #ef35fb, #6505a7);
  }
}
</style>
